//自定义的模板组件只能有一个根标签
Vue.component('rightdiv',{
    props:["view_arr","like_arr"],
    template:`
        <div>
            <!--浏览最多开始-->
            <ul class="list-group">
                <li class="list-group-item list-head">
                      <h4>
                          <i class="fa fa-eye"> 浏览最多</i>
                      </h4>
                </li>
                <li v-for="p in view_arr" class="list-group-item">
                    <div class="media">
                        <div class="media-left">
                            <a :href="'/detail.html?id='+p.id">
                                <img style="width: 64px;height:50px" class="media-object" :src="p.url" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a :href="'/detail.html?id='+p.id">
                                    {{p.title}}
                                </a>
                            </h4>
                            {{p.intro}}
                        </div>
                    </div>
                </li>
            </ul>
            <!--浏览最多结束-->
            <!--最受欢迎开始-->
            <ul class="list-group">
                <li class="list-group-item list-head">
                    <h4>
                        <i class="fa fa-thumbs-o-up"> 最受欢迎</i>
                    </h4>
                </li>
                <li v-for="p in like_arr" class="list-group-item">
                    <div class="media">
                        <div class="media-left">
                            <a :href="'/detail.html?id='+p.id">
                                <img style="width: 64px;height:50px" class="media-object" :src="p.url" alt="...">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">
                                <a :href="'/detail.html?id='+p.id">
                                    {{p.title}}
                                </a>
                            </h4>
                            {{p.intro}}
                        </div>
                    </div>
                </li>
            </ul>
            <!--最受欢迎结束-->
        </div>
    `
})

let right_vm = new Vue({
    el:"rightdiv",
    data:{
        view_arr:[],
        like_arr:[]
    },
    created:function () {
        axios.get("/product/selectView").then(function (response) {
            right_vm.view_arr = response.data;
        })
        axios.get("/product/selectLike").then(function (response) {
            right_vm.like_arr = response.data;
        })
    }
})